<template>
    <div id="home">
        <nav-bar>
            <template v-slot:left><i class="iconfont icon-fl-jia"></i></template>
            <template v-slot:default>首页</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="banners">
            <home-swiper :banner="banner"></home-swiper>
        </div>
        
        <Recommend></Recommend>
        <home-list :cates="cates"></home-list>

        


    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import Recommend from './ChildComps/Recommend';
import HomeSwiper from './ChildComps/HomeSwiper';
import HomeList from 'components/content/goods/HomeList';
import { ref, provide, onMounted} from 'vue'; //onMounted异步处理
import {getHomeall} from 'network/home';


export default{
    name:"Home",
    components:{
        NavBar,
        Recommend,
        HomeSwiper,
        HomeList
    },
    setup() {
        const banner = ref([]);
        const regoods = ref([]);
        const cates = ref([]);
        provide("regoods",regoods);
        onMounted(()=>{
            getHomeall().then(res=>{
                // console.log(res.categories);
                banner.value = res.slides;
                regoods.value = res.goods.data;
                cates.value = res.categories;
            }).catch(err=>{

            })

           

        });
        
        

        return{
            banner,
            regoods,
            cates
        }
    }
}
</script>

<style scoped>
.banners {
    margin-top: 45px;
    width: 100%;
}
</style>